<template>
  <div>
    <vheader></vheader>

  <div class="container">
    <div class="row">
      <div class="product">
        <div class="row">
          <div class="gallery">
            <img :src="fruit.activeStyleUrl" class="img-responsive" alt="" width="480" height="480">
          </div>
          <div class="detail">
            <h3 class="name"><span v-text="fruit.title"></span></h3>
            <div class="options">
              <div class="dec">
              <p>描述：<span v-text="fruit.desc"></span></p>
              </div>
              <div class="price">
                <p>价格：<strong>￥<span v-text="fruit.price"></span></strong></p>
              </div>
              <div class="option styles">
                <p>外观：
                  <ul>
                  <li v-for="(value, key) in fruit.style"
                      @click="changeStyle(key)"
                      :class="{active: fruit.activeStyleUrl == value}">
                    <span v-text="key"></span>
                  </li>
                  </ul>
                </p>
              </div>

              <!--<div class="option dl-horizontal">-->
                <!--<p>存储容量:</p>-->
                  <!--<ul>-->
                    <!--<li v-for="(value, key) in fruit.storage"-->
                        <!--@click="changePrice(key)"-->
                        <!--:class="{active: fruit.price == value}"><span v-text="key"></span></li>-->
                  <!--</ul>-->
              <!--</div>-->

              </div>

              <button
                @click="addToCart(fruit)">
                <span>加入购物车</span>
              </button>
            <!--<button class="btn"-->
                    <!--@click="addToCart(fruit)" >-->
                    <!--&lt;!&ndash;:disabled="fruit.isSelected"&ndash;&gt;-->

              <!--<span class="glyphicon glyphicon-shopping-cart"></span> 加入购物车-->
            <!--</button>-->
          </div>
        </div>
      </div> <!-- ./product -->
    </div>
  </div><!-- ./container -->

  <vfooter></vfooter>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import vheader from "./header.vue"
import vfooter from "./footer.vue";

export default {
  name: 'ShopDetail',
  components:{
    vfooter, vheader
  },
  data () {
		return {
			fruit: {}
		}
	},
	methods: {
    ...mapActions([
      'addToCart'
    ]),
    getDataById (lists, id) {
    	for (let i = 0; i < lists.length; i++) {
    		if (lists[i].id === id) {
    			return lists[i]
    		}
    	}
    	return false
    },
    changeStyle (styleKey) {
      this.fruit.activeStyle = styleKey
      this.fruit.activeStyleUrl = this.fruit.style[styleKey]
    },
    changePrice (storageKey) {
      this.fruit.activeStorage = storageKey
      this.fruit.price = this.fruit.storage[storageKey]
      this.fruit.isSelected = false
    }
  },
  created () {
    let id = this.$route.params.id
    this.fruit = this.getDataById(this.$store.state.products.all, id)
	}
}
</script>

<style lang="css">
  *{
    padding:0;
    margin:0;
  }
  .container{
    width:90%;
    margin:auto;
    font-family:"微软雅黑";
  }
  img{
    float:left;
  }
  .row{
    margin-top:30px;
  }
  .detail{
    width:50%;
    margin-left:520px;
  }
  .name{
    color: #323035;
    font-size:20px;
  }
  .options p{
    color: #868686;
    padding-top:15px;
  }
  .dec span{
    color:black;
  }
  .option ul li {
    float: left;
    list-style: none;
    margin: 8px 4px 0 0;
    padding: 0 8px;
    border: 2px solid #eee;
    color:black;
  }
  .option ul li:hover {
    border: 2px solid #c0392b;
  }
  .option ul .active {
    border: 2px solid #c0392b;
  }
</style>
